<template>
  <div class="center-top">
    <!-- 标题部分 -->
    <!-- 内容部分 -->
      <div class="list" v-for="(item,index) in data" @click="handleClick(item)">
        <h4>{{ item.normalName }}</h4>
        <div :class="['count','count_'+index]">{{ item.count }}</div>
        <div class="ratio">
          <div class="proportion-ratio"><span>占比</span><span>{{ item.proportion }}</span></div>
          <div class="ring-ratio"><span>环比</span><span><i :class="item.ring.indexOf('-')>-1?'el-icon-caret-bottom':'el-icon-caret-top'"></i>{{ item.ring }}</span>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      defalut() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  methods:{
    handleClick(param){
      this.$emit('handleClickLevelCode',param)
    }
  }
};
</script>

<style lang="scss" scoped>
// 大框
.center-top {
  height: 16%;
  display: flex;
  justify-content:space-between;
  padding: 20px;
  width: 100%;
  border-radius: 4px;
  border: 0px !important;
  background: transparent !important;
.list{
  cursor: pointer;
  width:25%;
  padding:0 .5rem;
  h4{
    padding:.5rem;
    font-size:1.2rem;
    background-image: linear-gradient(270deg, rgba(14,31,116,0.10) 2%, #1B3F9C 48%, rgba(14,31,116,0.10) 100%);
  }
  .count{
    font-size:2rem;
    padding:1rem 0;
    &.count_0{
      color:#fa1818;
    }
    &.count_1{
      color:#fece2f;
    }
    &.count_2{
      color:#21ffeb;
    }
    &.count_3{
      color:#3b8afe;
    }
  }
  .ratio{
    display:flex;
    .proportion-ratio{
      width:50%;
      span{
      margin-left:.2rem;
    }
    }
    .ring-ratio{
      span{
        margin-left:.2rem;
        i{margin:0 .2rem}
      }
    }
  }

}
}

::v-deep .el-icon-caret-top {
  color: #FF3535
}

::v-deep .el-icon-caret-bottom {
  color: #02b13c
}
</style>
